<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" v-show="showSearch">
          <el-form-item label="订单号" prop="appointmentCode">
              <el-input
                  v-model="queryParams.appointmentCode"
                  placeholder="请输入订单号"
                  clearable
                  @keyup.enter="handleQuery"
              />
          </el-form-item>
          <el-form-item label="预约状态" prop="appointmentStatus">
             <el-select v-model="queryParams.appointmentStatus" placeholder="预约状态" clearable style="width: 200px">
                <el-option
                   v-for="dict in dict.type.reservat_status"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                />
             </el-select>
          </el-form-item>

          <el-form-item >
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="list">
          <el-table-column label="id" align="center" prop="id" width="150px"/>
          <el-table-column label="应用名称" align="center" prop="appName" width="150px"/>
          <el-table-column label="商户订单id" align="center" prop="merchantOrderId" width="150px"/>
          <el-table-column label="支付订单号" align="center" prop="no" width="150px"/>
          <el-table-column label="风险名称" align="center" prop="riskFundName" width="150px"/>
          <el-table-column label="风险金额" align="center" prop="riskFundAmount" width="150px"/>
          <el-table-column label="服务开始时间" align="center" prop="startTime" width="150px"/>
          <el-table-column label="服务结束时间" align="center" prop="endTime" width="150px"/>
          <el-table-column label="微信支付服务订单号" align="center" prop="orderId" width="150px"/>
          <el-table-column label="商户收款总金额" align="center" prop="totalAmount" width="150px"/>
          <el-table-column label="总收款金额" align="center" prop="collectionTotalAmount" width="150px"/>
          <el-table-column label="待收金额" align="center" prop="collectionPayingAmount" width="150px"/>
           <el-table-column label="已收金额" align="center" prop="collectionPaidAmount"  width="150px"/>
          <el-table-column label="支付分状态" align="center" prop="status" width="150px">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.score_order_paystatus" :value="row.status" />
            </template>
          </el-table-column>
          <el-table-column label="支付状态" align="center" prop="payStatus" width="150px">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.pay_status_options" :value="row.payStatus" />
            </template>
          </el-table-column>
          <el-table-column label="服务订单状态" align="center" prop="state" width="150px">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.score_order_state" :value="row.state" />
            </template>
          </el-table-column>
          <el-table-column label="收款状态" align="center" prop="collectionState" width="150px">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.score_order_skstate" :value="row.collectionState" />
            </template>
          </el-table-column>
          <el-table-column label="收款时间" align="center" prop="paidTime" width="150px"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150px">
            <template slot-scope="{row}">
              <el-button
                type="text"
                @click="handleDetail(row)"
                v-hasPermi="['pay:scoreOrder:query']">查看详情</el-button>
              <el-button
                type="text"
                @click="handReject(row)"
                v-hasPermi="['pay:scoreOrder:cancel']"
                v-if="row.status === 10 || row.status === 20 || row.status === 21">取消订单
              </el-button>
            </template>
          </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 查看详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row v-if="title == '取消订单'">
          <el-col :span="24">
            <el-form-item label="取消原因" prop="reason">
              <el-input v-model="form.reason" :rows="6" type="textarea" placeholder="请输入取消原因"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="diy-text-sm diy-leading-10" :gutter="10" v-else>
          <el-col :span="item.span || 12" v-for="(item,index) in formDetail" :key="index">
            <div class="flex_hcneter">
              <svg-icon icon-class="dot" class-name='diy-text-primary diy-mr-1'/>
              <div v-if="item.zidian && item.isCustom" class="flex_hcneter">
                {{item.label}}：<dict-tag :options="dict.type[item.zidian]" :value="form[item.prop]"/>
              </div>
              <div v-else-if="item.prop == 'needCollection' && item.isCustom" class="flex_hcneter">
                {{item.label}}：{{form[item.prop] ? '是' : '否'}}
              </div>
              <div v-else-if="item.prop == 'cancelReason' && item.isCustom" class="flex_hcneter">
                {{item.label}}：{{form.status === 40 ? form[item.prop] : ''}}
              </div>
              <div v-else-if="item.prop == 'cancelTime' && item.isCustom" class="flex_hcneter">
                {{item.label}}：{{form.status === 40 ? form[item.prop] : ''}}
              </div>
              <div v-else>{{item.label}}：{{ form[item.prop] }}{{ item.danwei || '' }}</div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="popLodding" @click="submitForm" v-if="title == '取消订单'">确 认</el-button>
        <el-button type="primary" @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script >
import {getList,getDrtail,cancelScoreOrder,} from "@/api/finance/paySubOrder";
export default {
name: 'PaySubOrder',
dicts: ['pay_status_options','score_order_state','score_order_skstate','score_order_statedescription','score_order_paystatus','reservat_status',],
components: {  },
data() {
  return {
    popLodding:false,//弹窗加载
    // 遮罩层
    loading: true,
    // 显示搜索条件
    showSearch: true,
    queryParams: {// 查询参数
      pageNum: 1,
      pageSize: 10,
      dateRange:[],
    },
    // 总条数
    total: 0,
    list:[],//页面数据
    form: {},// 表单参数
    // 表单校验
    rules: {
      reason: [
        { required: true, message: "取消原因不能为空", trigger: "change" }
      ],
    },
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    formDetail:[
      {label:'应用标识',prop:'appId',},{label:'订单类型标识',prop:'orderKey',},{label:'渠道编码',prop:'channelCode',},{label:'商户订单编号',prop:'merchantOrderId',},
      {label:'支付订单号',prop:'no',},{label:'服务信息',prop:'serviceIntroduction',},
      {label:'支付分状态',prop:'status',zidian:'score_order_paystatus',isCustom:true,},{label:'服务订单状态',prop:'state',zidian:'score_order_state',isCustom:true,},
      {label:'订单状态说明',prop:'stateDescription',zidian:'score_order_statedescription',isCustom:true,},
      {label:'风险名称',prop:'riskFundName',},{label:'风险金额',prop:'riskFundAmount',},{label:'风险描述',prop:'riskFundDescription',span:24,},
      {label:'服务开始时间',prop:'startTime',},{label:'服务结束时间',prop:'endTime',},{label:'微信支付服务订单号',prop:'orderId',},
      {label:'商户收款总金额',prop:'totalAmount',},{label:'是否需要收款',prop:'needCollection',isCustom:true,},
      {label:'收款状态',prop:'collectionState',zidian:'score_order_skstate',isCustom:true,},
      {label:'总收款金额',prop:'collectionTotalAmount',},{label:'待收金额',prop:'collectionPayingAmount',},{label:'已收金额',prop:'collectionPaidAmount',},
      {label:'支付状态',prop:'payStatus',zidian:'pay_status_options',isCustom:true,},{label:'创建时间',prop:'createTime',},
      {label:'取消时间',prop:'cancelTime',isCustom:true,},{label:'取消原因',prop:'cancelReason',span:24,isCustom:true,},
    ],
  };
},
mounted(){
  this.getList()
},
methods: {
  handReject(e){//取消订单
    this.title = '取消订单'
    this.open = true
    this.form = {id:e.id}
  },
  handleDetail(row) {//查看详情
    const id = row.id
    this.open = true;
    this.title = "查看详情";
    getDrtail(id).then(async response => {
      let data = response.data || {}
      this.form = {
        ...data,
        hhPayAmount: this.math.divide(data.hhPayAmount || 0,100),
        payAmount: this.math.divide(data.payAmount || 0,100),
        refundAmount: this.math.divide(data.refundAmount || 0,100),
        riskFundAmount: this.math.divide(data.riskFundAmount || 0,100),
        totalAmount: this.math.divide(item.totalAmount || 0,100),
        collectionTotalAmount: this.math.divide(item.collectionTotalAmount || 0,100),
        collectionPayingAmount: this.math.divide(item.collectionPayingAmount || 0,100),
        collectionPaidAmount: this.math.divide(item.collectionPaidAmount || 0,100),
      }
    });
  },
  getList() {
    this.loading = true;
    let queryParams = {...this.queryParams}
    getList(queryParams).then(response => {
      let rows = response.rows || [];
      this.list = rows.map(item=>{
        return {
          ...item,
          hhPayAmount: this.math.divide(item.hhPayAmount || 0,100),
          payAmount: this.math.divide(item.payAmount || 0,100),
          refundAmount: this.math.divide(item.refundAmount || 0,100),
          riskFundAmount: this.math.divide(item.riskFundAmount || 0,100),
          totalAmount: this.math.divide(item.totalAmount || 0,100),
          collectionTotalAmount: this.math.divide(item.collectionTotalAmount || 0,100),
          collectionPayingAmount: this.math.divide(item.collectionPayingAmount || 0,100),
          collectionPaidAmount: this.math.divide(item.collectionPaidAmount || 0,100),
        }
      })
      this.total = response.total || 0;
      this.loading = false;
    });
  },
  /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  /** 重置按钮操作 */
  resetQuery() {
    this.queryParams = {// 查询参数
      pageNum: 1,
      pageSize: 10,
    }
    this.resetForm("queryRef");
    this.handleQuery();
  },
  submitForm(){//驳回申请提交
    this.$refs["form"].validate(valid => {
      if (valid) {
        this.popLodding = true
        cancelScoreOrder(this.form).then((response) => {
          this.popLodding = false
          this.$modal.msgSuccess("操作成功");
          this.getList();
          this.open = false;
        }).catch(error=>this.popLodding = false);
      }
    });
  },
}
}
</script>
